import React from 'react';
import {
  Box,
  Typography,
  Button,
  Chip,
  Avatar,
  IconButton,
  Tooltip,
} from '@mui/material';
import {
  ArrowBack,
} from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';

import { PageBreadcrumbs } from './PageBreadcrumbs';
import { PageHeaderProps } from '@/types';

export const PageHeader: React.FC<PageHeaderProps> = ({
  title,
  subtitle,
  breadcrumbs,
  actions,
  extra,
  avatar,
  backUrl,
}) => {
  const navigate = useNavigate();

  const handleBack = () => {
    if (backUrl) {
      navigate(backUrl);
    } else {
      navigate(-1);
    }
  };

  return (
    <Box sx={{ mb: 3 }}>
      {/* 面包屑导航 */}
      <PageBreadcrumbs items={breadcrumbs} />
      
      {/* 页面头部内容 */}
      <Box
        sx={{
          display: 'flex',
          alignItems: 'flex-start',
          justifyContent: 'space-between',
          gap: 2,
          flexWrap: 'wrap',
        }}
      >
        {/* 左侧：标题和描述 */}
        <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 2, flex: 1 }}>
          {/* 返回按钮 */}
          {backUrl !== undefined && (
            <Tooltip title="返回">
              <IconButton onClick={handleBack} sx={{ mt: 0.5 }}>
                <ArrowBack />
              </IconButton>
            </Tooltip>
          )}
          
          {/* 头像 */}
          {avatar && (
            <Avatar src={avatar} sx={{ width: 48, height: 48, mt: 0.5 }} />
          )}
          
          {/* 标题和描述 */}
          <Box sx={{ flex: 1 }}>
            <Typography
              variant="h4"
              component="h1"
              sx={{
                fontWeight: 600,
                mb: subtitle ? 0.5 : 0,
                fontSize: { xs: '1.5rem', sm: '2rem' },
              }}
            >
              {title}
            </Typography>
            
            {subtitle && (
              <Typography
                variant="body1"
                color="text.secondary"
                sx={{ fontSize: '1rem' }}
              >
                {subtitle}
              </Typography>
            )}
            
            {/* 额外内容 */}
            {extra && (
              <Box sx={{ mt: 1 }}>
                {extra}
              </Box>
            )}
          </Box>
        </Box>
        
        {/* 右侧：操作按钮 */}
        {actions && (
          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              gap: 1,
              flexShrink: 0,
              flexWrap: 'wrap',
            }}
          >
            {actions}
          </Box>
        )}
      </Box>
    </Box>
  );
};